<template>
  <div class="cretificate-main">
    <el-form :inline="true" class="certificateListForm" ref="form" :model="batchdata">
      <el-form-item class="registman" label="注册号">
        <el-input size="small" v-model="batchdata.regNum" placeholder="请输入证书编号"></el-input>
      </el-form-item>
      <el-form-item style="margin-left:30px" label="注册人地址">
        <el-input size="small" v-model="batchdata.regAdd" placeholder="请输入主体名称"></el-input>
      </el-form-item>
      <el-form-item label="注册日期">
        <el-date-picker
          size="small"
          type="date"
          :picker-options="timeChange"
          value-format="yyyy-MM-dd"
          placeholder="选择注册日期"
          v-model="startTime"
          @change="searchtime"
        ></el-date-picker>
      </el-form-item>
      <el-form-item label="显示批次">
        <el-select
          v-model="num"
          size="small"
          placeholder="请选择批次号"
          filterable
          @change="serachbatchchange"
        >
          <el-option
            v-for="item in options"
            :key="item.id"
            :label="item.batchNumber"
            :value="item.batchNumber"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item v-if="batchdata.state === 1" label="发放日期">
        <el-date-picker
          type="date"
          :picker-options="timeChange"
          placeholder="选择发放日期"
          value-format="yyyy-MM-dd"
          v-model="grantTime"
          @change="searchtime"
        ></el-date-picker>
      </el-form-item>
    </el-form>
    <el-button size="small" type="primary" @click="batchsearch">搜索</el-button>
    <el-button size="small" type="info" @click="resetbtn">重置</el-button>
    <!-- <el-button
          size="small"
          type="danger"
          icon="el-icon-delete-solid"
          @click="batchdelete"
          :disabled="isdelete"
    >删除</el-button>-->
    <el-button size="small" type="primary" icon="el-icon-back" @click="returnbtn">返回</el-button>

    <el-button
      class="exit"
      size="small"
      type="success"
      icon="el-icon-download"
      @click="outexcelbtn"
    >导出EXcel</el-button>
    <el-tabs type="border-card" v-model="activeName" @tab-click="tabchange">
      <el-tab-pane label="未发放" name="2">
        <el-table
          ref="multipleTable"
          :data="tableDatanot"
          tooltip-effect="dark"
          style="width: 100%"
          @selection-change="handleSelectionChange"
          @row-click="rowbtn"
          border
        >
          <el-table-column align="center" type="selection" width="55"></el-table-column>
          <el-table-column align="center" prop="picnum" label="序号">
            <!--<template slot-scope="scope">{{ scope.$index + 1 }}</template>-->
          </el-table-column>
          <el-table-column align="center" prop="batchNumber" label="批次号"></el-table-column>
          <el-table-column align="center" prop="regNum" label="注册号"></el-table-column>
          <el-table-column align="center" prop="regper" label="注册人" show-overflow-tooltip></el-table-column>
          <el-table-column align="center" prop="regAdd" label="注册地址" show-overflow-tooltip></el-table-column>
          <el-table-column align="center" prop="regStartTime" label="有效日期起"></el-table-column>
          <el-table-column align="center" prop="regEndTime" label="有效日期止"></el-table-column>
          <el-table-column align="center" label="发放状态" width="100">
            <template slot-scope="scope">
              <span class="notgrant">
                {{
                scope.row.state == 2 ? "未发放" : ""
                }}
              </span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="操作" width="280">
            <template slot-scope="scope">
              <el-link
                type="primary"
                icon="el-icon-thumb"
                @click.stop="giveout(scope.row.regNum)"
                size="small"
              >发放</el-link>
              <el-link
                type="primary"
                icon="el-icon-edit-outline"
                @click.stop="updatebtn(scope.row.id)"
                size="small"
              >修改</el-link>
              <el-link
                type="danger"
                icon="el-icon-delete-solid"
                @click.stop="deletebtn(scope.row.regNum)"
                size="small"
              >删除</el-link>

              <!-- <el-button
                type="primary"
                icon="el-icon-thumb"
                size="small"
                @click.stop="giveout(scope.row.regNum)"
              >发放</el-button>-->
              <!-- <el-button
                type="warning"
                icon="el-icon-edit-outline"
                size="small"
                @click.stop="updatebtn(scope.row.id)"
              >修改</el-button>-->
              <!-- <el-button
                type="danger"
                icon="el-icon-delete-solid"
                size="small"
                @click.stop="deletebtn(scope.row.regNum)"
              >删除</el-button>-->
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="已发放" name="1">
        <el-table
          ref="multipleTable1"
          :data="tableDatado"
          tooltip-effect="dark"
          style="width: 100%"
          :cell-style="{'text-align':'center'}"
          :header-cell-style="{'text-align': 'center'}"
          @selection-change="handleSelectionChange1"
          @row-click="rowbtn"
          border
        >
          <!-- <el-table-column type="selection" width="55"></el-table-column> -->
          <el-table-column prop="num" label="序号" width="55">
            <template slot-scope="scope">{{ scope.$index + 1 }}</template>
          </el-table-column>
          <el-table-column prop="batchNumber" label="批次号"></el-table-column>
          <el-table-column prop="regNum" label="注册号"></el-table-column>
          <el-table-column prop="regper" label="注册人"></el-table-column>
          <el-table-column prop="regAdd" label="注册地址" show-overflow-tooltip width="300"></el-table-column>
          <el-table-column prop="regStartTime" label="注册日期"></el-table-column>
          <el-table-column prop="regEndTime" label="有效期至"></el-table-column>

          <el-table-column label="发放日期" min-width="90">
            <template slot-scope="scope">
              {{
              scope.row.grantTime | TimeFilter
              }}
            </template>
          </el-table-column>
          <el-table-column label="发放状态">
            <template slot-scope="scope">
              <span class="dogrant">
                {{
                scope.row.state == 1 ? "已发放" : ""
                }}
              </span>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="210">
            <template slot-scope="scope">
              <el-link
                type="primary"
                icon="el-icon-edit-outline"
                @click.stop="lookbtn(scope.row.id)"
                size="small"
              >查看</el-link>
              <el-link
                type="danger"
                icon="el-icon-delete-solid"
                @click.stop="deletebtn(scope.row.regNum)"
                size="small"
              >删除</el-link>
              <!-- <el-button
                type="primary"
                icon="el-icon-edit-outline"
                size="small"
                @click.stop="lookbtn(scope.row.id)"
              >查看</el-button>-->
              <!-- <el-button
                type="danger"
                size="small"
                icon="el-icon-delete-solid"
                @click.stop="deletebtn(scope.row.regNum)"
              >删除</el-button>-->
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageNum"
          :page-sizes="[10, 20, 30]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="toal"
        ></el-pagination>
      </div>
    </el-tabs>

    <!--  -->
    <el-dialog title="修改信息" :visible.sync="dialogFormVisible">
      <el-form :model="updatebatch" :rules="addbatchrules" ref="addbatch">
        <el-form-item label="注册号：" :label-width="formLabelWidth" prop="regNum">
          <el-input v-model="updatebatch.regNum" autocomplete="off" disabled></el-input>
        </el-form-item>

        <el-form-item label="注册人：" :label-width="formLabelWidth" prop="regper">
          <el-input
            v-model="updatebatch.regper"
            autocomplete="off"
            :disabled="isdisabled"
            ref="edit1"
          ></el-input>
        </el-form-item>
        <el-form-item label="注册人地址" :label-width="formLabelWidth" prop="regAdd">
          <el-input
            v-model="updatebatch.regAdd"
            autocomplete="off"
            :disabled="isdisabled"
            ref="edit2"
          ></el-input>
        </el-form-item>
        <el-form-item label="注册日期：" :label-width="formLabelWidth" prop="regStartTime">
          <el-input v-model="updatebatch.regStartTime" autocomplete="off" disabled></el-input>
        </el-form-item>
        <el-form-item label="有效期至：" :label-width="formLabelWidth" prop="regEndTime">
          <el-input
            v-model="updatebatch.regEndTime"
            autocomplete="off"
            :disabled="isdisabled"
            ref="edit3"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer" v-if="activeName == '2'">
        <el-button type="primary" class="update" @click="isedit">点击可修改</el-button>
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="updatedo">确 定</el-button>
      </div>
    </el-dialog>
    <!-- <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage1"
      :page-sizes="[10, 20, 30, 40]"
      layout="total, sizes, prev, pager, next, jumper"
      :total="toal"
    ></el-pagination>-->
  </div>
</template>

<script>
import getExcel from "../../utils/outExcel/outExcel1";
import {
  getissued,
  getnotued,
  getPagedata,
  outExcel,
  grantbook,
  deleteone,
  batchdeletebook,
  batchmoresearch,
  outExcelgetdataids,
  getbathdata,
  updatadata,
} from "../../api/datastac";

import { mapMutations } from "vuex";
export default {
  name: "batchList",
  components: {},
  props: {},
  data() {
    return {
      startTime: "",
      grantTime: "",
      isdelete: true,
      num: "",
      // 批次号列表
      options: [],
      timeChange: {
        disabledDate(time) {
          return (
            // time.getTime() < Date.now() - 3600 * 1000 * 24 * 183 ||
            time.getTime() >= Date.now()
          ); //选择时间范围
        },
      },
      isdisabled: true,
      dialogFormVisible: false,
      updatebatch: {},
      formLabelWidth: "120px",
      ids: [],
      excelids: [],
      excelid: [],
      toal: 0,
      currentPage1: 1,
      // 未发放的数据
      tableDatanot: [],

      // 已发放的数据
      tableDatado: [],
      //扫面的数据
      scan: {
        id: null,
        scanshow: false,
        //图片
        data: {
          type: "身份证",
          imgtop: "",
          imgbottom: "",
        },
        //数据
        form: {
          name: "",
          idnumber: "",
          site: "",
          birth: "",
          sex: "",
        },
      },
      addbatchrules: {
        regper: [{ required: true, message: "请输入注册人", trigger: "blur" }],
        regAdd: [
          { required: true, message: "请输入注册人地址", trigger: "blur" },
        ],
      },
      //判断tabs
      activeName: "2",
      // 初始查询参数
      isuse: {
        batchNumber: this.$route.query.batchNumber,
        pageSize: 10,
        pageNum: 1,
      },

      batchdata: {
        regNum: null,
        regper: "",
        regAdd: "",
        regStartTime: "",
        grantTime: "",
        pageNum: 1,
        pageSize: 10,
        batchNumber: null,
        state: 1,
      },
      pagedto: {
        pageSize: 10,
        pageNum: 1,
      },

      //分页
      //第几页
      pageSize: 10,
      pageNum: 1,
      total: 0,
      // pagelength: 0,
    };
  },
  watch: {
    ids: function (val) {
      if (val.length > 1) {
        this.isdelete = false;
      } else {
        this.isdelete = true;
      }
    },
  },
  computed: {},

  methods: {
    ...mapMutations([
      "changePageSizeData",
      "changePageNumeData",
      "changePageToal",
      "setoutexcelId",
      "setoutexcelclassId",
    ]),
    //tabs事件
    tabchange(e) {
      this.getdata(this.isuse);
    },
    //发放
    giveout(id) {
      this.$confirm("此操作将发放证书, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          grantbook(id)
            .then((res) => {
              if (res.data.code == 200) {
                this.$message({
                  type: "success",
                  message: "发放成功",
                });
                this.getdata(this.pagedto);
              }
            })
            .catch((err) => {
              return err;
            });
        })
        .catch(() => {
          this.$message("取消发放");
        });
    },
    // 单个删除
    deletebtn(regNum) {
      this.$confirm("此操作将删除信息, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          deleteone(regNum)
            .then((res) => {
              if (res.data.code == 200) {
                this.$message({
                  type: "success",
                  message: "删除成功",
                });
              }
              this.getdata(this.pagedto);
            })
            .catch((err) => {
              this.$message({
                type: "error",
                message: "删除失败",
              });
            });
        })
        .catch(() => {
          this.$message("取消删除");
        });
    },

    // 批量删除
    batchdeletedo() {
      if (this.ids.length == 0) {
        return this.$message({
          type: "warning",
          message: "你还没有选择哦",
        });
      }
      batchdeletebook(this.ids)
        .then((res) => {
          if (res.data.code == 200) {
            this.$message({
              type: "success",
              message: "删除成功",
            });
            this.getdata(this.pagedto);
          }
        })
        .catch((err) => {
          this.$message({
            type: "error",
            message: "删除失败",
          });
        });
    },
    batchdelete() {
      this.$confirm("此操作将批量删除, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          switch (this.activeName) {
            case "1":
              this.batchdeletedo();
              break;
            case "2":
              this.batchdeletedo();
              break;
          }
        })
        .catch(() => {
          this.$message("取消删除");
        });
    },
    // 显示批次下拉
    serachbatchchange() {
//      this.batchdata.batchNumber = this.num;
//      this.getdata(this.isuse);
    },
    // 导出Excel
    outexcelbtn() {
//      getExcel({ids:this.excelids});//这个传的id集合
        if(this.num){
            this.batchdata.batchNumber = this.num;
        }
        this.batchdata.regStartTime = this.startTime;
        this.batchdata.grantTime = this.grantTime;
        let dataBatch = this.batchdata;
        switch (this.activeName) {
            // 已发放
            case "1":
                dataBatch.state = 1;
                break;
            // 未发放
            case "2":
                dataBatch.state = 2;
                break;
        }
        getExcel({proCertificate:dataBatch});
    },
    // 获取证书信息
    getdata(data) {
        if(this.num){
            this.batchdata.batchNumber = this.num;
        }
      this.batchdata.regStartTime = this.startTime;
      this.batchdata.grantTime = this.grantTime;
      let dataBatch = this.batchdata;
      // console.log(this.batchdata.state);
      // console.log(this.batchdata.state);
      switch (this.activeName) {
        // 已发放
        case "1":
          dataBatch.state = 1;
          getissued(dataBatch, this.pagedto)
            .then((res) => {
              console.log(res.data.data);
              if (res.data.code == 200) {
                if (res.data.data != "暂无数据") {
                  this.toal = res.data.data.total;
                  console.log("这个this是：", this);
                  console.log("总条数：", res.data.data.total);
                  this.tableDatado = res.data.data.list;
                  this.excelidsdo(this.tableDatado);
                }
              } else {
                this.tableDatado = [];
              }
            })
            .catch((err) => {
              return err;
            });
          break;
        // 未发放
        case "2":
          dataBatch.state = 2;
          getnotued(dataBatch, this.pagedto)
            .then((res) => {
              if (res.data.code == 200) {
                if (res.data.data != "暂无数据") {
                  this.toal = res.data.data.total;
                  this.tableDatanot = res.data.data.list;
                  this.excelidsdo(this.tableDatanot);
                }
              } else {
                this.tableDatanot = [];
              }
            })
            .catch((err) => {
              return err;
            });
          break;
      }
    },
    // 返回
    returnbtn() {
      this.$router.push({
        path: "batchList",
      });
    },
    //分页
    handleSizeChange(val) {
      this.pagedto.pageSize = val;
      this.getdata();
    },
    handleCurrentChange(val) {
      this.pagedto.pageNum = val;
      this.getdata();
    },
    toggleSelection(rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row);
          this.$refs.multipleTable1.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
        this.$refs.multipleTable1.clearSelection();
      }
    },
    handleSelectionChange(val) {
      this.getcertId(val);
      this.excelidsdo(val);
    },
    handleSelectionChange1(val) {
      this.getcertId(val);
    },
    getcertId(val) {
      this.ids = [];
      val.filter((item) => {
        this.ids.push(item.id);
      });
    },
    // 获取导出Excel需要的id
    excelidsdo(val) {
      this.excelids = [];
      val.filter((item) => {
        this.excelids.push(item.id);
      });
    },
    // 单击某一行时选中
    rowbtn(val) {
      this.toggleSelection([val]);
    },
    // 多条件查询
    batchsearch() {



      this.batchdata.regStartTime = this.startTime;
      this.batchdata.grantTime = this.grantTime;
      switch (this.activeName) {
        case "1":
          (this.batchdata.state = 1),
            (this.batchdata.batchNumber = this.$route.query.batchNumber);
            if(this.num){
                this.batchdata.batchNumber = this.num;
            }
          batchmoresearch(this.batchdata, this.pagedto)
            .then((res) => {
              console.log(res);
              this.toal = res.data.data.total;
              this.tableDatado = res.data.data.list;
            })
            .catch((err) => {
              return err;
            });
          break;
        case "2":
          (this.batchdata.state = 2),
            (this.batchdata.batchNumber = this.$route.query.batchNumber);
            if(this.num){
                this.batchdata.batchNumber = this.num;
            }
          batchmoresearch(this.batchdata, this.pagedto)
            .then((res) => {
              // console.log(this.batchdata);
              // console.log(res);
              this.toal = res.data.data.total;
              this.tableDatanot = res.data.data.list;
            })
            .catch((err) => {
              return err;
            });
          break;
      }
    },
    searchtime() {
      this.batchdata.grantTime = this.timedispose(this.batchdata.grantTime);
    },
    timedispose(time) {
      let date = new Date(time);
      return `${date.getFullYear()}-${this.zero(
        date.getMonth() + 1
      )}-${this.zero(date.getDate())} ${this.zero(date.getHours())}:${this.zero(
        date.getMinutes()
      )}:${this.zero(date.getSeconds())}`;
    },
    // 时间补零
    zero(n) {
      return n > 10 ? n : "0" + n;
    },
    // 重置
    resetbtn() {
      this.num = "";
      (this.batchdata = {
        regper: "",
        regAddr: "",
        regStartTime: "",
        grantTime: "",
        pageNum: 1,
        pageSize: 10,
        batchNumber: "",
        // num: "",
        // status: "",
        state: this.batchdata.state,
      }),
        (this.startTime = ""),
        (this.grantTime = "");
      // this.getdata(this.isuse);
    },
    // 查询所有批次
    getbatch() {
      getbathdata()
        .then((res) => {
          if (res.data.code == 200) {
            this.options = res.data.data.list;
            this.hasbatchNumber();
          }
        })
        .catch((err) => {
          return err;
        });
    },
    // 判断路由是否有批次号
    hasbatchNumber() {
      if (this.$route.query.batchNumber) {
        this.isuse.batchNumber = this.this.$route.query.batchNumber;
      } else {
        this.isuse.batchNumber = this.options[0].batchNumber;
      }
    },
    // 修改
    updatebtn(id) {
      this.dialogFormVisible = true;
      this.tableDatanot.forEach((item) => {
        if (item.id == id) {
          this.updatebatch = item;
        }
      });
    },
    // 可编辑
    isedit() {
      this.isdisabled = !this.isdisabled;
    },
    // 修改信息
    updatedo() {
      this.tableDatanot.filter((item) => {
        if (item.id == this.updatebatch.id) {
          this.$confirm("此操作将修改信息, 是否继续?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          }).then(() => {
            updatadata(item)
              .then((res) => {
                if (res.data.code == 200) {
                  this.$message({
                    type: "success",
                    message: "修改成功",
                  });
                }
                return;
              })
              .catch((err) => {
                this.$message({
                  type: "error",
                  message: "修改失败",
                });
              });
          });
        }
      });
    },
    // 查看信息
    lookbtn(id) {
      this.dialogFormVisible = true;
      this.tableDatado.forEach((item) => {
        if (item.id == id) {
          this.updatebatch = item;
        }
      });
    },
  },
  mounted() {
    this.batchdata.batchNumber = this.$route.query.batchNumber;
    this.getdata(this.pagedto);
    this.getbatch();
  },
};
</script>
<style lang="less" scoped>
.cretificate-main {
  .certificateListForm {
    display: flex;
    flex-wrap: wrap;
  }
  .el-tabs {
    margin-top: 20px;
  }
}
.el-link {
  margin: 0 10px;
}
.exit{
  float: right;
}
</style>
